<template>
	<div class="mainChild">
		<div style="display: flex;display: flex;align-items: center;justify-content: center;">
			<el-card style="width: 1500px;">
				<div style="display: flex;display: flex;align-items: center;justify-content: center; width: 1500px;">
					<el-button type="primary" @click="addLabel()" round>插入节点</el-button>
					<el-button type="primary" @click="deleteLabel()" round>删除指定节点</el-button>
					<el-button type="primary"  round>搜索指定节点</el-button>
				</div>
			</el-card>
		</div>
		<!-- <div v-if="activeName == 'first'">shiwu</div> -->
		<el-container>
			<el-main
				style="display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
				<div style="padding-top: 30px;">
					<el-table :data="tableData" border style="width: 1200px;">
						<!-- <el-table-column fixed prop="date" label="日期" width="150">
				</el-table-column> -->
						<el-table-column prop="id" label="实体id" show-overflow-tooltip width="350">
						</el-table-column>

						<el-table-column prop="name" label="实体名" show-overflow-tooltip width="450">
						</el-table-column>

						<el-table-column fixed="right" label="操作" width="300">
							<template slot-scope="scope">
								<el-button @click="editOne(scope.row)" type="text" size="small">编辑</el-button>
								<el-button @click="deleteOne(scope.row)" type="text" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-row style="padding-top: 20px;">
					<el-col style="text-align:center">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
							layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="10"
							:page-sizes="[10, 20, 30, 40, 50, 100]">
						</el-pagination>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		created() {
			this.setPageNum();
			this.getDataList(1, this.pSize);
		},
		data() {
			return {
				tableData: [],
				total: 10,
				pSize: 10 //默认10条
			};
		},
		props: {
			activeName: String,
		},
		mounted() {

		},
		watch: {
			activeName(newVal, oldVal) {
				if (newVal != oldVal) {
					this.setPageNum();
					this.getDataList(1, this.pSize);
				}
			}
		},
		methods: {
			addLabel() {
				const _this = this;
				this.$prompt('请输入节点名称，系统会自动添加到'+_this.activeName+'数据集', '提示', {
					confirmButtonText: '插入',
					cancelButtonText: '取消'
				}).then(({
					value
				}) => {
					var params = new URLSearchParams();
					params.append('identity', _this.activeName);
					params.append('name', value);
					_this.$http.post("/admin/otherAdd", params).then(function(resp) {
						if (resp.data.code == 200) {
							_this.$message({
								type: 'success',
								message: '插入节点：' + value + '到：' + _this.activeName + '数据集'
							});
						}else{
							_this.$message({
								type: 'warning',
								message: '插入该节点失败'
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消插入'
					});
				});
				_this.setPageNum();
				_this.getDataList(1,_this.pSize);
			},
			deleteLabel() {
				const _this = this;
				this.$prompt('请输入节点名称，系统会自动删除', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消'
				}).then(({
					value
				}) => {
					var params = new URLSearchParams();
					params.append('identity', _this.activeName);
					params.append('name', value);
					_this.$http.post("/admin/otherDelete1", params).then(function(resp) {
						if (resp.data.code == 200) {
							_this.$message({
								type: 'success',
								message: '删除节点：' + value
							});
						}else{
							_this.$message({
								type: 'warning',
								message: '删除失败，没有找到该节点。'
							});
						}
					})
			
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除'
					});
				});
				_this.setPageNum();
				_this.getDataList(1,_this.pSize);
			},
			setPageNum() {
				const _this = this;
				var params = new URLSearchParams();
				params.append("identity", _this.activeName);
				_this.$http.post("/admin/otherNum", params).then(function(resp) {
					if (resp.data.code == 200) {
						_this.total = resp.data.data;
					} else {
						console.log("没查到总页数");
					}

				})
			},
			getDataList(index, pageSize) {
				const _this = this;
				var params = new URLSearchParams();
				params.append("identity", _this.activeName);
				params.append("page", index);
				params.append("size", pageSize);
				_this.$http.post("/admin/otherPage", params).then(function(resp) {
					if (resp.data.code == 200) {
						_this.tableData = resp.data.data;
					} else {
						console.log("没查到");
					}
				})

			},
			handleSizeChange(val) {
				const _this = this;
				// console.log('每页' + val + ' 条');
				_this.pSize = val;
				_this.getDataList(1, val);
			},
			handleCurrentChange(val) {
				const _this = this;
				// console.log('当前页: ' + val);
				_this.getDataList(val, _this.pSize);
			},
			editOne(row) {
				this.$prompt('请输入邮箱', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
					inputErrorMessage: '邮箱格式不正确'
				}).then(({
					value
				}) => {
					this.$message({
						type: 'success',
						message: '你的邮箱是: ' + value
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			deleteOne(row) {
				this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
				// console.log(row.name);
			}
		}
	}
</script>

<style>
</style>